<template>
    <view class="special-content" :style="{ paddingBottom: marginBottom, backgroundColor }">
        <view class="container" :style="padding">
            <!-- 长条状 -->
            <view v-if="mode === 0">
                <img-cache @click="jump(list[0])" :src="`${global.productImageUrl}${list[0].imageId}/0`" width="100%" class="main" mode="widthFix" />
            </view>
            <!-- 2列 -->
            <view v-if="mode === 1" class="mode-1">
                <block v-for="(item, index) in list.slice(0, 2)">
                    <img-cache @click="jump(item)" :src="`${global.productImageUrl}${item.imageId}/0`" width="100%" mode="widthFix" class="items" :style="{ marginRight: rightGap }" />
                </block>
            </view>
            <!-- 3列 -->
            <view v-if="mode === 2" class="mode-2">
                <block v-for="(item, index) in list">
                    <img-cache @click="jump(item)" :src="`${global.productImageUrl}${item.imageId}/0`" width="100%" mode="widthFix" v-if="index <= 2" class="items" :style="{ marginRight: rightGap }" />
                </block>
            </view>
            <!-- 1:2 -->
            <view v-if="mode === 3" class="mode-3">
                <view class="mode-3-left" :style="{ marginRight: rightGap }">
                    <img-cache @click="jump(list[0])" :src="`${global.productImageUrl}${list[0].imageId}/0`" width="100%" height="100%" mode="aspectFill" />
                </view>
                <view class="u-flex-1">
                    <img-cache @click="jump(list[1])" :src="`${global.productImageUrl}${list[1].imageId}/0`" width="100%" mode="widthFix" class="items" />
                    <img-cache @click="jump(list[2])" :src="`${global.productImageUrl}${list[2].imageId}/0`" width="100%" mode="widthFix" class="items" :style="{ marginTop: rightGap }" />
                </view>
            </view>
            <!-- 4列 -->
            <view v-if="mode === 4" class="mode-4">
                <block v-for="(item, index) in list">
                    <img-cache @click="jump(item)" :src="`${global.productImageUrl}${item.imageId}/0`" width="100%" mode="widthFix" v-if="item && index <= 3" class="item" :style="{ marginRight: rightGap }" />
                </block>
            </view>
            <!-- 2:2 -->
            <view v-if="mode === 5" class="mode-5">
                <view
                    class="item"
                    v-for="(item, index) in list.slice(0, 4)"
                    :key="'items' + index"
                    :style="{
                        width: mode5width,
                        marginRight: rightGap,
                        marginTop: updownGap
                    }"
                >
                    <img-cache @click="jump(item)" :src="`${global.productImageUrl}${item.imageId}/0`" width="100%" mode="widthFix" v-if="item" />
                </view>
            </view>
            <!-- 默认状态  1拖3-->
            <view v-if="mode === 6">
                <img-cache :src="`${global.productImageUrl}${list[0].imageId}/0`" width="100%" mode="widthFix" @click="jump(list[0])" v-if="list[0]" class="main" />
                <view class="row" :style="{ marginTop: updownGap }">
                    <view v-for="(item, index) in list.slice(1, 4)" :key="index" class="row-item" :style="{ marginRight: updownGap }">
                        <img-cache :src="`${global.productImageUrl}${item.imageId}/1`" width="100%" mode="widthFix" @click="jump(item)" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'
import global from '@/config'

const ins = inject<any>('data')

const list = computed(() => {
    return ins.imageList
})

const mode = computed(() => {
    return ins.styleCode || 0
})

const backgroundColor = computed(() => {
    return (ins.style && ins.style.backgroundColor) || 'white'
})

const marginBottom = computed(() => {
    return ins.style && (ins.style.marginBottom || 0) + 'px'
})

/** 上下层 间隔 */
const updownGap = computed(() => {
    return ins.style && (ins.style.upDownGap || 0) + 'px'
})

/** 左右间隔 */
const rightGap = computed(() => {
    return ins.style && (ins.style.rightGap || 0) + 'px'
})

const mode5width = computed(() => {
    return `calc((100% - ${rightGap}) / 2)`
})

const padding = computed(() => {
    let paddingY = ins.style && (ins.style.paddingY || 0) + 'px'
    let paddingX = ins.style && (ins.style.paddingX || 0) + 'px'

    return {
        padding: `${paddingY} ${paddingX}`
    }
})

function jump({ url }: { url: any }) {
    let { urlId, urlType, urlString } = url
    uni.$u.$util.jumpByUrlType(urlId, urlType, urlString)
}
</script>

<style lang="scss" scoped>
.special-content {
    width: 100%;
    overflow: hidden;

    .row {
        display: flex;
        flex-direction: row;

        .row-item {
            width: calc(100% / 3);
            &:last-child {
                margin-right: 0 !important;
            }
        }
    }
}

.container {
    overflow: hidden;
    :deep(.u-grid) {
        align-items: inherit;
    }

    :deep(.u-grid-item-box) {
        padding: 0rpx !important;
    }

    .mode-1 {
        display: flex;

        .items {
            flex: 1;
            &:last-child {
                margin-right: 0 !important;
            }
        }
    }

    .mode-2 {
        display: flex;
        justify-content: space-around;
        .items:last-child {
            margin-right: 0 !important;
        }
    }

    .mode-3 {
        display: flex;
        justify-content: space-between;
        align-items: stretch;

        .mode-3-left {
            flex: 1;
        }
    }

    .mode-4 {
        display: flex;
        justify-content: space-between;
        .item:last-child {
            margin-right: 0 !important;
        }
    }

    .mode-5 {
        display: flex;
        flex-wrap: wrap;

        .item {
            &:nth-child(2n + 0) {
                margin-right: 0 !important;
            }
            &:nth-child(1) {
                margin-top: 0 !important;
            }
            &:nth-child(2) {
                margin-top: 0 !important;
            }
        }
    }
}
</style>
